
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 代 理 用 户 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input
                    clearable
                    v-model="query.name"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="代理商名称"
                    class="handle-input mr10"
                ></el-input>
                <el-input
                    clearable
                    v-model="query.contactMobile"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="联系电话"
                    class="handle-input mr10"
                ></el-input>
                <el-select @change="changeSheng" v-model="query.provinceId" clearable placeholder="省" style="width: 200px; margin: 0 20px 0 0">
                    <el-option v-for="item in proList" :key='item.pid' :label="item.pname" :value='item.pid'></el-option>
                </el-select>
                <el-select no-data-text='请先选择省' v-model="query.cityId" clearable placeholder="市" style="width: 200px; margin: 0 20px 0 0">
                    <el-option v-for="item in cityList" :key='item.cid' :label="item.cname" :value='item.cid'></el-option>
                </el-select>
                <el-button type="primary" @click="getList">搜索</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="provinceName" label="省名称" width="150" align="center"></el-table-column>
                <el-table-column prop="cityName" label="城市名称" align="center">
                    <!-- <template slot-scope="scope">
                    <span v-if="scope.row.accountTypeName == 10" style="color:#ed1941">支出</span>
                    <span v-if="scope.row.accountTypeName == 20" style="color:#45b97c">收入</span>
                  </template> -->
                </el-table-column>
                <el-table-column prop="nickName" label="会员昵称" align="center">
                    <!-- <template slot-scope="scope">
                    <span v-if="scope.row.fundTypeName == 10" >余额</span>
                    <span v-if="scope.row.fundTypeName == 20" >期权</span>
                    <span v-if="scope.row.fundTypeName == 30" >互助</span>
                  </template> -->
                </el-table-column>
                <el-table-column prop="categoryName" label="类型名称" width="100" align="center">
                    <!-- <template slot-scope="scope">
                    {{ scope.row.category | tyepFilter }}
                  </template> -->
                </el-table-column>
                <el-table-column prop="name" label="代理商名称" width="100" align="center"></el-table-column>
                <el-table-column prop="contactName" label="联系人" width="100" align="center"></el-table-column>
                <el-table-column prop="mobile" label="联系电话" width="100" align="center"></el-table-column>
                <el-table-column prop="createdBy" label="创建人" width="100" align="center"></el-table-column>
                <el-table-column prop="createdTime" label="创建时间" width="200" align="center"></el-table-column>
                <el-table-column label="操作" width="80" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning"  @click="searchDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="详情" :visible.sync="senInfoShow" width="40%">
            <el-form ref="send" :model="senInfo" label-width="100px">
                <el-form-item label="省名称:">
                    <span>{{senInfo.provinceName}}</span>
                </el-form-item>
                <el-form-item label="城市名称:">
                    <span>{{senInfo.cityName}}</span>
                </el-form-item>
                <el-form-item label="会员昵称:">
                    <span>{{senInfo.nickName}}</span>
                </el-form-item>
                <el-form-item label="类型名称:">
                    <span>{{senInfo.categoryName}}</span>
                </el-form-item>
                <el-form-item label="代理商名称:">
                    <span>{{senInfo.name}}</span>
                </el-form-item>
                <el-form-item label="联系人:">
                    <span>{{senInfo.contactName}}</span>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <span>{{senInfo.mobile}}</span>
                </el-form-item>
                <el-form-item label="创建人:">
                    <span>{{senInfo.createdBy}}</span>
                </el-form-item>
                <el-form-item label="创建时间:">
                    <span>{{senInfo.createdTime}}</span>
                </el-form-item>
            </el-form>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="senInfoShow = false">取 消</el-button>
                <el-button type="primary" @click="sureSend">确 定</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingAgent,AgentUserInfo,ProvinceCity } from '@/api/agent';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20,
                contactMobile: '',
                name:'',
                cityId:'',
                provinceId:''
            },
            senInfo: {
                amount: ''
            },
            senInfo2: {
                amount: ''
            },
            senInfoShow2: false,
            senInfoShow: false,
            tableData: [],
            pageTotal: 0,
            proList:[],
            cityList:[]
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        changeSheng(e){
            console.log(e)
            // this.query.provinceCode = e.pcode
            // this.cityList = e.cityList
            this.query.cityCode = ''
            this.proList.map((item,index) => {
                if(item.pid == e){
                    this.cityList = item.cityList
                }
            })
        },
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            PagingAgent(this.query).then((res) => {
                this.tableData = res.Data.list;
                this.pageTotal = res.Data.paging.totalItemCount;
            });
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        searchDetail(info) {
            //   console.log(info)
            AgentUserInfo({id:info.id}).then((res) => {
                //   console.log(res)
                if (res.RequestStatus == 200) {
                    this.senInfo = res.Data;
                    this.senInfoShow = true;
                }else{
                    this.$message.error(res.Message)
                }
            });
        },
        deleteDetail(info) {
            this.senInfo2 = JSON.parse(JSON.stringify(info));
            this.senInfoShow2 = true;
        },
        sureSend2() {
            Deduction(this.senInfo2).then((res) => {
                //   console.log(res)
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.senInfoShow2 = false;
                }
            });
        },
        sureSend() {
            Recharge(this.senInfo).then((res) => {
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.senInfoShow = false;
                }
            });
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log(123);
        this.getList();
        ProvinceCity().then((res) => {
            console.log(res);
            this.proList = res.Data.list;
        });
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>